<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui/layui.js" charset="UTF-8"></script>
    <style>
        /*解决普通复选框无上边框问题*/
        .laytable-cell-1-0-0 .layui-icon {
            margin-top: 5px !important;
        }
        /*解决横条复选框无上边框问题*/
        .layui-table-view .layui-form-checkbox{
            margin-top:0px !important;
        }
    </style>
</head>
<body>
<%--表单方式提交新增内容页面--%>
<form id="formData" class="layui-form layui-form-pane" lay-filter="formData" style="display: none">
    <input type="text" name="enumber" hidden>
<%--    <input type="text" name="eid" value="123" hidden>--%>
    <div class="layui-form-item">
        <label class="layui-form-label">选择部门</label>
        <div class="layui-input-inline">
            <select id="typeSelect" name="did" lay-filter="type">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择职位</label>
        <div class="layui-input-inline">
            <select id="typeSelect1" name="erole" lay-filter="type">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="ename" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工性别</label>
        <div class="layui-input-inline">
            <select  name="esex" lay-filter="type">
                <option value="男"  >男</option>
                <option value="女"  >女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="etel"lay-verify="required|phone|number" placeholder="请输入员工手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="esid" lay-verify="identity" placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工地址</label>
        <div class="layui-input-inline">
            <input type="text" name="eaddress" placeholder="请输入地址信息" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">入职日期</label>
        <div class="layui-input-inline">
            <input type="text" name="eIndate" placeholder="请选择入职日期"id="indate" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="tijiao">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--离职提交更新内容页面--%>
<form id="formData1" class="layui-form layui-form-pane" lay-filter="formData1" style="display: none">
    <input type="text" name="enumber" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="ename" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <select  name="esex" lay-filter="type">
                <option value="男"  >男</option>
                <option value="女"  >女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-inline">
            <input type="text" name="etel" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择部门</label>
        <div class="layui-input-inline">
            <select id="typeSelect2" name="did"  lay-filter="type1">
                <option value="d_id"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择职位</label>
        <div class="layui-input-inline">
            <select id="typeSelect3" name="erole" lay-filter="type2">
                <option value="e_role"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">离职日期</label>
        <div class="layui-input-inline">
            <input type="text" name="eIndate" placeholder="请选择日期" id="indate1" autocomplete="off"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="lizhi">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<%--模糊查询表头栏目--%>
<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" placeholder="请输入查询员工姓名" name="employeename" id="employeename" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search">按姓名搜索</button>

    <div class="layui-inline">
        <input class="layui-input" placeholder="请输入部门名称" name="depname" id="depname" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search1">按部门搜索</button>

    <div class="layui-inline">
        <input class="layui-input" placeholder="请输入职位名称" name="pername" id="pername" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search2">按职位搜索</button>

</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<%--表头相关栏目--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="adddepart">新增员工</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">刷新表格</button>
    </div>
</script>

<!--数据表格右侧按钮组-->
<script type="text/html" id="barDemo">
    {{#  if(d.estatus == 1){ }}   <%--这里的d.e_status中的d是加载数据表格的方法中状态栏中调用的函数中的参数--%>
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled"  lay-event="del">删除</a>
        <button class='layui-btn layui-btn-xs layui-btn-danger' lay-event="sj">停职</button>
        <button class='layui-btn layui-btn-xs layui-btn-danger' lay-event="lz">离职</button>
    </div>
    {{#  } else { }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <button class='layui-btn layui-btn-xs layui-btn-normal' lay-event="sj">启用</button>
        <button class='layui-btn layui-btn-xs layui-btn-danger' lay-event="lz">离职</button>
    </div>
    {{#  } }}
</script>
</body>
<script>
    layui.use(['table','jquery','laydate','form'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

        //执行一个laydate实例设定日期格式
        laydate.render({
            elem: '#indate'
        });
        laydate.render({
            elem: '#indate1'//指定元素
        });

        //页面加载完成后执行的事件
        $(function (){
            //当页面加载完成时先调用showTable()函数
            showTable();
            getAllDepart();
            getAllRole();
        })

        //封装加载数据表格的方法
        function showTable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/findAllEmp'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,title: '部门数据表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'enumber', title:'工号',sort: true}
                    ,{field:'ename', title:'姓名'}
                    ,{field:'epassword', title:'员工登陆密码'}
                    ,{field:'esex', title:'性别'}
                    ,{field:'eage', title:'年龄'}
                    ,{field:'etel', title:'手机号'}
                    ,{field:'esid', title:'身份证号'}
                    ,{field:'eaddress', title:'地址'}
                    ,{field:'eIndate', title:'入职日期',sort: true}
                    ,{field:'departmentName', title:'部门' ,templet:function(data){
                            return data.dept.departmentName
                        }}
                    ,{field:'rName', title:'职位',templet:function (data) {
                            return data.role.rName
                        }}
                    ,{field:'estatus', title:'状态', width:'8%', sort: true,templet: function(d){
                            if (d.estatus==0){
                                return "<button class='layui-btn layui-btn-xs layui-btn-danger'>停职中</button>";
                            }else {
                                return "<button class='layui-btn layui-btn-xs layui-btn-normal'>工作中</button>";
                            }
                        }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width: '12%'}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,10,15]
            });
        }


        //页面加载完成时，填充部门类型的下拉框
        function getAllDepart(){
            $("#typeSelect").empty();
            $("#typeSelect2").empty();
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/getAllType',
                dataType:'json',
                async:false,
                success:function (typeData){
                    for (var i=0;i<typeData.data.length;i++){
                        $("#typeSelect").append(
                            $("<option>").attr("value",typeData.data[i].did).html(typeData.data[i].dname)
                        )
                        $("#typeSelect2").append(
                            $("<option>").attr("value",typeData.data[i].did).html(typeData.data[i].dname)
                        )

                    }
                    form.render('select','formData'); //刷新select选择框渲染
                    form.render('select','formData1'); //刷新select选择框渲染
                }
            })
        }
        function getAllRole(){
            $("#typeSelect1").empty();
            $("#typeSelect3").empty();
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/getAllRole',
                dataType:'json',
                async:false,
                success:function (typeData){
                    for (var i=0;i<typeData.data.length;i++){
                        $("#typeSelect1").append(
                            $("<option>").attr("value",typeData.data[i].rid).html(typeData.data[i].rname)
                        )
                        $("#typeSelect3").append(
                            $("<option>").attr("value",typeData.data[i].rid).html(typeData.data[i].rname)
                        )
                    }
                    form.render('select','formData'); //刷新select选择框渲染
                    form.render('select','formData1'); //刷新select选择框渲染
                }
            })
        }

        /*搜索控制执行重载方法*/
        $("#search").click(function (){
            showTable();
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    employeename: $("#employeename").val(),
                }
            });
            $("#employeename").val("");
        })

        $("#search1").click(function (){
            showTable();
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    depname:$("#depname").val(),
                }
            });
            $("#depname").val("");
        })

        $("#search2").click(function (){
            showTable();
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    pername:$("#pername").val(),
                }
            });
            $("#pername").val("");
        })

        /**
         * 监听新增/修改部门信息的表单提交
         */
        form.on('submit(tijiao)', function(data){
            console.log(data.field);
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/updateemp',
                /*dataType: 'json',*/
                data:data.field,
                //data.field表示当前表单所有数据
                dataType: 'json',
                success:function (result){
                    layer.closeAll();
                    if (result.code == 200 ){
                        layer.msg(result.msg, {icon: 1})
                        showTable();
                    }else{
                        layer.msg(result.msg, {icon: 5})
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        /**
         * 离职的表单提交
         */
        form.on('submit(lizhi)', function(data){
            console.log(data.field);
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/lizhiemp',
                /*dataType: 'json',*/
                data:data.field,
                //data.field表示当前表单所有数据
                dataType: 'json',
                success:function (result){
                    layer.closeAll();
                    if (result.code == 200 ){
                        layer.msg(result.msg, {icon: 1})
                        showTable();
                    }else{
                        layer.msg(result.msg, {icon: 5})
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //头工具栏事件   toolbar头工具栏
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'adddepart':
                    showTable();
                    getAllDepart();
                    getAllRole();
                    //打开弹框前先清空表单 设置新增弹框
                    $("#formData")[0].reset();
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: '新增员工'
                        ,maxmin: true
                        ,offset: '100px'
                        ,area:['380px','360px']
                        ,content: $("#formData")//content中填入的就是要新增的弹框里面最初的内容
                    });
                    break;
                case 'isAll':
                        //当页面加载完成时先调用showTable()函数
                        showTable();
                        getAllDepart();
                        getAllRole();
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件  tool是layui自定义的工具  这里是右侧操作框中的内容
        table.on('tool(test)', function(obj){
            //obj是当前所选行的所有数据转换成data
            var data = obj.data;
            if(obj.event === 'del'){
                if (data.estatus==0){
                layer.confirm('是否删除该员工？', function(index){
                    $.post('${pageContext.request.contextPath}/deleteemp',{"enumber":data.enumber},function (delobj) {
                        /*   JSON.parse()将字符串类型的Json转化成json对象
                       JSON.stringify()将json对象装换成json字符串*/
                        if(delobj.code==200){
                            //alert(delobj.msg);尽量避免使用弹出框
                            layer.msg(delobj.msg, {icon: 1});
                            showTable();
                        }else {
                            layer.msg(delobj.msg, {icon: 5});
                        }
                    })
                    layer.closeAll();
                });}
            } else if(obj.event === 'edit'){
                console.log(obj)
                getAllDepart();
                getAllRole();
                //打开弹框前先清空表单 设置新增弹框
                $("#formData")[0].reset();
                form.val('formData',obj.data);
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '修改员工信息'
                    ,maxmin: true
                    ,offset: '100px'
                    ,area:['380px','360px']
                    ,content: $("#formData")
                });
                //填充选中行数据到指定表单

            }else if(obj.event === 'sj'){
                $.get('${pageContext.request.contextPath}/updateStatus',{"eStatus":data.estatus,"eNumber":data.enumber},function (result){
                    if (result.code == 200 ){
                        showTable();
                        layer.msg(result.msg, {icon: 1});
                    }else{
                        layer.msg(result.msg, {icon: 5});
                    }
                })
            }else if(obj.event === 'lz'){
                $("#formData1")[0].reset();
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '离职员工信息补充'
                    ,maxmin: true
                    ,offset: '100px'
                    ,area:['380px','360px']
                    ,content: $("#formData1")
                });
                //填充选中行数据到指定表单
                console.log(obj.data)
                form.val('formData1', obj.data);
            }
        });
    });
</script>
</html>
